<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>出行管理</title>
		<link rel="stylesheet" type="text/css" href="css/school/school_gettingaround.css" />
		<!--element-ui-->
		<!--<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">-->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<header></header>
		<section>
			<!-- 内容部分 -->
			<div class="center-rigth">
				<p class="title"><b>出行管理</b></p>
				
				<div class="head">
					<p class="count"><span id="chu">出行统计</span></p>
					<div id="info">
						<ul id="ti">
							<li>
								<div id="ti-box">
									<span id="tiles">
										正在研学
									</span>
									<p class="shuzi">3</p>
								</div>
							</li>
							<li>
								<div id="ti-box">
									<span id="tiles">
										当前出行人数
									</span>
									<p class="shuzi">340</p>
								</div>
							</li>
							<li>
								<div id="ti-box">
									<span id="tiles">
										异常提醒
									</span>
									<p class="shuzi">0</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
				
				
				<div id="text-center">
					<div class="text-center-left">
						<p class="zhuangtai">出行状态跟踪</p>
						<div class="redias">
							<label><input type="radio" name="chuxing" value="显示全部正在研学出行" /><span>显示全部正在研学出行</span></label>
							<label><input type="radio" onclick='radio_content_map("郑州市中原区伊河路100号院","郑州市中原区伏牛路")' name="chuxing"/ checked="checked" value="郑州市第八中学云台山研学旅行"><span>郑州市第八中学云台山研学旅行</span></label>
							<label><input type="radio" onclick='radio_content_map("郑州市中原区伊河路100号院","郑州市中原区")' name="chuxing" value="郑州市第八中学红旗渠研学旅行" /><span>郑州市第八中学红旗渠研学旅行</span></label>
							<label><input type="radio" name="chuxing" value="郑州市第八中学绿博园研学旅行" /><span>郑州市第八中学绿博园研学旅行</span></label>
							<label><input type="radio" name="chuxing" value="郑州市第八中学博物院研学旅行" /><span>郑州市第八中学博物院研学旅行</span></label>
						</div>
					</div>
					<div class="text-center-right">
						<div id="container"></div>
						<!--路线图详情-->
						<!--<div id="panel"></div>-->
					</div>
				</div>
				
				
				<div id="text-center-foot">
					<div id="app">
						<p class="xiangqing">出行计划详情</p>
						<template>
							<el-tabs v-model="activeName" @tab-click="handleClick" stretch>
								<el-tab-pane label="学校的出行情况" name="first">
									<div class="school_info">
										<p class="scoool_name" id="bootmean">
											学校名称&nbsp;&nbsp;<el-input v-model="school_name" placeholder="郑州市第八初级中学" style="width: 280px;margin-left: 15px;"></el-input>
											&nbsp;&nbsp;&nbsp;&nbsp;审批编号&nbsp;&nbsp;<el-input v-model="shenpi_Id" placeholder="ZZDBCJZX001" style="width: 100px;"></el-input>
										</p>
										<p id="bootmean">出行名称&nbsp;&nbsp;<el-input v-model="chuxing_name" placeholder="白云山研学旅行" style="width: 170px;margin-left: 15px;"></el-input>
										</p>
										<div class="chuxing_people" id="bootmean">
											<p class="pele_one">
												出行人员&nbsp;&nbsp;
												<el-input v-model="class_nianji" placeholder="七年级" style="width: 80px;margin-left: 15px;"></el-input>
												<el-input v-model="class_banji" placeholder="1班" style="width: 80px;"></el-input>
												<el-input v-model="class_count" placeholder="60人" style="width: 80px;"></el-input>
												<el-input v-model="class_te_name" placeholder="王老师" style="width: 80px;"></el-input>
												<el-input v-model="class_phone" placeholder="15038277250" style="width: 120px;"></el-input>
											</p>
											<p class="peple_two">
												<el-input v-model="class_nianji2" placeholder="七年级" style="width: 80px;margin-left: 15px;"></el-input>
												<el-input v-model="class_banji2" placeholder="2班级" style="width: 80px;"></el-input>
												<el-input v-model="class_count2" placeholder="60人" style="width: 80px;"></el-input>
												<el-input v-model="class_te_name2" placeholder="王老师" style="width: 80px;"></el-input>
												<el-input v-model="class_phone2" placeholder="15038277250" style="width: 120px;"></el-input>
											</p>
										</div>
										<div class="chuxing_time" id="bootmean">
											<p class="chu_Time">
												出行日期&nbsp;&nbsp;
												<el-date-picker v-model="start_end" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
												 :default-time="['00:00:00', '23:59:59']" style="width: 270px;margin-left: 15px;">
												</el-date-picker>
											</p>
											<p class="s_e_Time">
												<template>
													<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
											      start: '06:00',
											      step: '00:15',
											      end: '23:30'
											    }"
													 style="width: 130px;margin-left: 10px;">
													</el-time-select>
													<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
											      start: '06:00',
											      step: '00:15',
											      end: '23:30',
											      minTime: startTime
											    }"
													 style="width: 130px;margin-left: 10px;">
													</el-time-select>
												</template>
											</p>
										</div>
										<p id="bootmean">
											出行目的地&nbsp;&nbsp;
											<span class="mudi">目的地1</span>
											<el-input v-model="diming" placeholder="河南" style="width: 80px;margin-right: 10px;"></el-input>
											<template>
												<el-select v-model="mudidi" placeholder="请选择" style="width: 120px;margin-right: 10px;">
													<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</template>
											<el-input v-model="jidi" placeholder="白云山研究学基地" style="width: 150px;"></el-input>
										</p>
										<p id="bootmean">
											带队老师&nbsp;&nbsp;
											<el-input v-model="te_name" placeholder="邢亚峰" style="width: 80px;margin-left: 15px;"></el-input>
											<el-input v-model="te_sex" placeholder="男" style="width:50px;"></el-input>
											<el-input v-model="te_zhiwu" placeholder="年级班主任" style="width:100px;"></el-input>
											<el-input v-model="te_phone" placeholder="15038277250" style="width: 120px;"></el-input>
										</p>
										<p id="bootmean">
											车辆安排&nbsp;&nbsp;
											<span class="car_chu">出行车辆1</span>
											<el-input v-model="car_teacher" placeholder="邢老师" style="width: 80px;"></el-input>
											<el-input v-model="car_teacher_phone" placeholder="15038277250" style="width: 120px;"></el-input>
											<el-input v-model="car_teacher_zhiwu" placeholder="豫A9FP67" style="width: 80px;"></el-input>
											<el-input v-model="car_address" placeholder="ZZBZ001" style="width: 100px;"></el-input>
										</p>
										<p id="bootmean">
											<div>出行介绍&nbsp;&nbsp;</div>
											<div class="chuxing_info" style="margin-left: 70px;">
												<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="chuxing_info" style="width: 500px;">
												</el-input>
											</div>
										</p>
									</div>
								</el-tab-pane>
								<el-tab-pane label="出行目的地" name="second">
									<div>
										<a href="javascript:(0)" class="infoshow">详情介绍...</a>
										<ul>
											<li class="first">
												<div class="name">
													<span>基地名称:</span>
													<span>云台山研学旅行基地</span>
												</div>
												<div class="type">
													<span>特色标签:</span>
													<span>自然生态</span>
												</div>
											</li>
											<li class="first">
												<div class="name">
													<span>所属级别:</span>
													<span>省级</span>
												</div>
												<div class="type">
													<span>适用学段:</span>
													<span>小学 初中 高中</span>
												</div>
											</li>
											<li class="first">
												<div class="name">
													<span>预定联系人:</span>
													<span>张璐</span>
												</div>
												<div class="type">
													<span>预定联系人联系方式:</span>
													<span>15038277250</span>
												</div>
											</li>
											<li class="first">
												<div class="name">
													<span>已接待研学团体:</span>
													<span>28个</span>
												</div>
												<div class="type">
													<span>累计接待研学人数:</span>
													<span>45738人</span>
												</div>
											</li>
											<li class="first">
												<div class="name">
													<span>
														<span id="tuanti">
															近期接待研学团体:
															<div id="chuxing">
																<p class="school">郑州市第八中学 <span class="people">120人</span> 已出行</p>
																<p class="school">郑州市第九中学 <span class="people">452人</span> 未出行</p>
																<p class="school">郑州市胜利路小学 <span class="people">264人</span> 未出行</p>
															</div>
														</span>
													</span>
												</div>
											</li>
										</ul>
									</div>
								</el-tab-pane>
								<el-tab-pane label="在途休息" name="third">
									<div id="sleep">
										<div class="info_list">
											<p class="car_info">
												<span id="car_Id">
													<el-checkbox v-model="checked">
														车牌号
													</el-checkbox>
													豫A9FP67
												</span>
												<span id="dingweiqi">
													定位器编号：ZZBA001
												</span>
												<span>
													<el-button icon="el-icon-location-outline">郑州市侯寨收费站</el-button>
												</span>
											</p>
											<p class="gen-teacher">
												<span id="car_techer">
													跟车老师:<span class="teacher_name">邢老师</span>
												</span>
												<span id="techer_phone">
													联系方式：15038277250
												</span>
												<span class="student_info">
													<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
												</span>
											</p>
										</div>
										<div class="info_list">
											<p class="car_info">
												<span id="car_Id">
													<el-checkbox v-model="checked">
														车牌号
													</el-checkbox>
													豫A7N984
												</span>
												<span id="dingweiqi">
													定位器编号：ZZBA002
												</span>
												<span>
													<el-button icon="el-icon-location-outline">郑州市侯寨收费站</el-button>
												</span>
											</p>
											<p class="gen-teacher">
												<span id="car_techer">
													跟车老师:<span class="teacher_name">王老师</span>
												</span>
												<span id="techer_phone">
													联系方式：15038277250
												</span>
												<span class="student_info">
													<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
												</span>
											</p>
										</div>
										<div class="info_list">
											<p class="car_info">
												<span id="car_Id">
													<el-checkbox v-model="checked">
														车牌号
													</el-checkbox>
													豫A7B950
												</span>
												<span id="dingweiqi">
													定位器编号：ZZBA003
												</span>
												<span>
													<el-button icon="el-icon-location-outline" size="max">郑州市侯寨收费站</el-button>
												</span>
											</p>
											<p class="gen-teacher">
												<span id="car_techer">
													跟车老师:<span class="teacher_name">王老师</span>
												</span>
												<span id="techer_phone">
													联系方式：15038277250
												</span>
												<span class="student_info">
													<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
												</span>
											</p>
										</div>
									</div>
								</el-tab-pane>
								<el-tab-pane label="团队信息" onclick="team_content_map()" name="fourth">
									<div class="infos">
										<div class="info_left">
											<p class="stuet">
												<span id="classs">
													<el-checkbox v-model="checked">
														班组
													</el-checkbox>
													<input type="text" id="clas" placeholder="年级" />
													<input type="text" id="clas" placeholder="班级" />
													<input type="text" id="clas" placeholder="人数" />
												</span>
											</p>
											<p class="teacher">
												<input type="text" id="clas" placeholder="管理老师" />
												<input type="text" id="clas" placeholder="联系方式" />
												<input type="text" id="clas" placeholder="定位器编号" />
											</p>
											<p class="student_inf">
												<span>
													<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
												</span>
											</p>
											<p class="info_time">
												<span id="kaoqin_time">
													考勤时间
												</span>
												<span id="date">
													<el-date-picker v-model="riqi" type="date" placeholder="选择日期" style="width: 120px;">
													</el-date-picker>
												</span>
												<span id="minute">
													<el-time-select v-model="time" :picker-options="{
												   start: '00:00',
												    step: '00:15',
												    end: '23:59'
												  }"
													 placeholder="选择时间" style="width: 120px;">
													</el-time-select>
												</span>
											</p>
											<p class="info_size">
												<input type="text" id="kaoqin" placeholder="考勤情况：总人数60人,未考勤2人" />
											</p>
										</div>
										<div class="info_right">
											<div id="myPageTop">
												<input id="T_tipinput" placeholder="请输入关键字" />
											</div>
											<div id="maps">
											</div>
										</div>
									</div>
								</el-tab-pane>
								<el-tab-pane label="学生信息" name="fiveth">
									<div class="stu_info">
										<div class="stu_info_left">
											<el-input placeholder="王梓新" v-model="name" style="width: 180px;">
												<i slot="suffix" class="el-input__icon el-icon-search"></i>
											</el-input>
											<p class="stu_name">姓<span class="null_content"></span>名：王梓新</p>
											<p class="stu_sex">性<span class="null_content"></span>别：男</p>
											<p class="stu_school">学<span class="null_content"></span>校：郑州市第八中学</p>
											<p class="stu_class">班<span class="null_content"></span>级：8年级25班</p>
											<p class="stu_teacher">带队老师：邢老师<span class="null_content"></span><span>15038277250</span></p>
											<p class="stu_facilityId">设备编号：ZZDBZX287<span class="null_content"></span>
											<el-button icon="el-icon-location-outline" onclick="student_content_map()">点击获取位置</el-button>
											</p>
											<p class="stu_address">实时位置：焦作市云台山景区</p>
											<p class="stu_infoTime">
												考勤情况：
												<ul class="infoTime_ul">
													<li class="infoTime_li">2019-10-26<span class="null_content"></span>识别</li>
													<li class="infoTime_li">2019-10-26<span class="null_content"></span>未识别</li>
												</ul>
											</p>
											<p class="stu_weilan">电子围栏：未发生触发电子围栏情况</p>
											<p class="stu_xingwei">行为识别：未发生行为识别安全报警未发生行为识别安全报警未发生行为识别安全报警</p>
										</div>
										<div class="stu_info_right">
											<input id="s_tipinput" placeholder="请输入关键字" />
											<div id="stu_info"></div>
										</div>
									</div>
								</el-tab-pane>
							</el-tabs>
						</template>
					</div>
				</div>
			</div>
		</section>
		<footer></footer>

		<!--地图路线图-->
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=903a28585001da28fdbbd5d5890c059f&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Driving"></script>
		<!--element-ui.js-->
		<script src="js/vue.js"></script>
		<script src="js/element-ui.js"></script>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/school/school_gettingaround.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
